<template>
	<view>
		<view class="video-wrap">
			<view class="v-c">
<<<<<<< HEAD
				<view class="v-item-box">
					<view class="v-top">
						<view class="left">
							<u-avatar mode="square" :size="80" src="/static/img/home_notification_news.png"></u-avatar>
							<view class="l-1">
								<view class="l-1-name">张大帅</view>
								<view class="l-desc">4小时前</view>
							</view>
							
=======
				<block v-for="(item,index) in list" :key="index">
					<view class="v-item-box">
						
						<view class="v-body">
							<vs-ratio-view ratio="5/3">
								<vs-swiper preView @click="swiperClick" imgMode="widthFix" v-if="!item.videoPath"  :list="item.picList.map(v=>v.smallPic)" indicatorDots autoplay></vs-swiper>
								<video v-else class="coverFull" :poster="item.videoImgPath" :src="item.videoPath"></video>
							</vs-ratio-view>
>>>>>>> 314cf5fd97b3d104171c4ece21f2d4f040c708c7
						</view>
						<view class="v-top">
							<view class="left">
								<u-avatar  :size="80" :src="item.headImg"></u-avatar>
								<view class="l-1">
									<view class="l-1-name">{{item.creater||'***'}}</view>
									<view class="l-desc">{{$Time.timeIntervalToNow(new Date(item.createTime))}}</view>
								</view>
								
							</view>
							<view class="right flex middle ">
								<view class="item flex middle " @click="handleSetLoveInfo(item)">
									<vs-img-icon v-if="item.isUp>0" url="/static/img/xin.png" :size="20"></vs-img-icon>
									<vs-img-icon v-else url="/static/img/home_zan.png" :size="16"></vs-img-icon>
									<text class="r-t">{{item.goodNo}}</text>
								</view>
								<view class="item flex middle " @click="handleComment(item)">
									<vs-img-icon url="/static/img/home_ping.png" :size="16"></vs-img-icon>
									<text class="r-t">{{item.commentNo}}</text>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<vs-loadmore :loading="bottomLoading" paddingTB="30"></vs-loadmore>
		</view>
	</view>
</template>

<script>
	import {getChildFunList,setLoveInfo,cancelLoveInfo} from '@/api/homeapi'
	export default{
	
		data(){
			return{
				listQuery:{page:1,rows:10},
				list:[],
				bottomLoading:false
			}
		},
		mounted() {
			this.getList()
		},
		methods:{
			swiperClick(e,l){
				console.log(e,l);
			},
			handleSetLoveInfo(e){
				if(e.isUp>0){
					cancelLoveInfo({id:e.id}).then(res=>{
						console.log(res);
						if(res.code==='1'){
							let t=this.list.find(v=>v.id===e.id)
							t.isUp= 0
							t.goodNo--
						}
					})
				}else{
					setLoveInfo({refId:e.id,type:'童趣'}).then(res=>{
						console.log(res);
						if(res.code==='1'){
							let t=this.list.find(v=>v.id===e.id)
							t.isUp= 1
							t.goodNo++
						}
					})
				}
			},
			handleComment(item){
				this.$Router.push({name:'fundetail',params:{info:item}})
			},
			getList(){
				if(this.bottomLoading) return;
				this.bottomLoading = true
				getChildFunList(this.listQuery).then(res=>{
					console.log(res);
					res.data.forEach(v=>{
							v.headImg?v.headImg = this.$Store.baseUrl + v.headImg:''
							v.videoImgPath?v.videoImgPath=this.$Store.baseUrl + v.videoImgPath:''
							v.videoPath?v.videoPath=this.$Store.baseUrl + v.videoPath:''
							if(v.picList.length>0){
								v.picList.forEach(k=>{
									k.picPath=this.$Store.baseUrl+k.picPath
									k.smallPic = this.$Store.baseUrl+k.smallPic
								})
							}
					})
					this.list = [...this.list,...res.data]
					this.listQuery.page++
					this.bottomLoading = false
					
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.video-wrap{
		width: 100%;
		background: #fff;
		.v-c{
			width: 90%;
			margin: 0 auto;
			padding-bottom: 50px;
			
			.v-item-box{
				padding-top: 30px;
				.v-top{
					display: flex;
					justify-content: space-between;
					padding: 25px 0;
					border-bottom: 1px solid #dadada;
					
					
					.left{
						display: flex;
						align-items: center;
						
						.l-1{
							margin-left: 10px;
							.l-1-name{
								font-size: 14px;
								color: #363636;
								
							}
							.l-desc{
								font-size: 12px;
								color: #888;
								padding: 3px 0 0;
							
								
							}
						}
					}
					.right{
						width: 90px;
						justify-content: space-between;
						.item{
							flex: 1;
							display: flex;
							justify-content: flex-end;
						}
						.r-t{margin-left: 5px;}
						
					}
				}
				.v-body{
					
				}
		
			}
			
		}
		
	}
</style>
